<template>
    <div>
        <van-nav-bar left-text="" left-arrow @click-left="router.go(-1)" />
        <van-tabs v-model:active="active">
            <van-tab title="首页">
                <van-search v-model="value" placeholder="智能生活" />

                <van-swipe :autoplay="3000" lazy-render>
                    <van-swipe-item v-for="image in list" :key="image">
                        <img :src="image.image_src" style="width: 100%;" />
                    </van-swipe-item>
                </van-swipe>


                <van-grid :border="false" :column-num="4">
                    <van-grid-item v-for="(v, i) in grid" :key="i">
                        <van-image :src="v.image_src" />
                    </van-grid-item>
                </van-grid>

                <van-pull-refresh v-model="loading" @refresh="onRefresh">
                    <van-grid :border="false" :column-num="2">
                        <van-grid-item v-for="(v, i) in cart" :key="i" @click="todetail(v.goods_id)">
                            <van-image
                                :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                            {{ v.goods_name }}
                        </van-grid-item>
                    </van-grid>
                </van-pull-refresh>

            </van-tab>
            <van-tab title="国补">
                <van-search v-model="value" placeholder="请输入搜索关键词" />

                <van-pull-refresh v-model="loading" @refresh="onRefresh">
                    <van-grid :border="false" :column-num="2">
                        <van-grid-item v-for="(v, i) in cart" :key="i" @click="todetail(v.goods_id)">
                            <van-image
                                :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
                            {{ v.goods_name }}
                        </van-grid-item>
                    </van-grid>
                </van-pull-refresh>
            </van-tab>
        </van-tabs>


    </div>
</template>

<script setup>
import { showToast } from 'vant';
import { swiperdataApi, catitemsApi, searchApi } from '@/api/api';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()

const todetail = (id) => {
    router.push({ path: '/detail', query: { id: id } })
}

const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;

    }, 1000);
}

// 轮播图
let list = ref([])
const getlist = () => {
    swiperdataApi().then((res) => {
        console.log(res);
        list.value = res.data.message
    })
}
getlist()
// nav导航
let grid = ref([])
const getgrid = () => {
    catitemsApi().then((res) => {
        console.log(res);
        grid.value = res.data.message
    })
}
getgrid()

// 列表
let cart = ref([])
const getcart = () => {
    searchApi().then((res) => {
        console.log(res);
        cart.value = res.data.message.goods
    })
}
getcart()

</script>

<style lang="scss" scoped></style>